<template>
    <div class="sea-page-column">
        <div class="flex-column-gap padding-large fill-success anchor">
            <blockquote>
                <span class="block"> 场景：n 个按钮，复用 1 个弹窗面板；</span>
                <span class="block"> 原理：基于 floating-ui.js，与 el-popover 底层类似；</span>
                <span class="block"> 优点：没啥明显缺点，非常完美的一个库；</span>
                <span class="block"> 优点：代码做了拆分，如果希望直接操作 dom，可以使用 Popper 库；</span>
            </blockquote>

            <div>
                <el-button @click="click2">click1</el-button>
                <el-button @click="click2">click2</el-button>
                <el-button @click="click2">click3</el-button>
                <el-button @click="click2">click4</el-button>
            </div>

            <sea-popover :reference="dom2" class="small-card box-primary with-shadow">
                <span>sth. in popover...</span>
            </sea-popover>

            <blockquote>
                <span class="block"> 可以将角标的样式放到 i 标签上，通过跳转 left/top 等属性，精准控制角标的位置；</span>
            </blockquote>

            <div class="anchor small-card">
                <i class="font-arrow-top" style="left: 96px;"></i>
                <i class="font-arrow-top" style="left: 48px;"></i>
                <i class="font-arrow-top" style="right: 48px;"></i>
                <span>允许微调角标的位置</span>
            </div>
        </div>

        <div class="padding-large anchor">

            <blockquote>
                <span class="block"> 与 title 效果类似，但是用于展示 innerText 内容；</span>
                <span class="block"> 折叠的文本内容，可以使用当前设计（常用于表格）；</span>
                <span class="block"> 可以通过 hover、click 等方式触发</span>
            </blockquote>

            <button id="button" aria-describedby="tooltip" @click="smartTitle.display">click</button>

            <div class="text-overflow-ellipsis" style="width: 100px;"
                 @mouseleave="smartTitle.hidden" @mouseenter="smartTitle.display">
                折叠了的文本
                一二三四五六七八九十零
                一二三四五六七八九十零
                一二三四五六七八九十零
                一二三四五六七八九十零
            </div>
        </div>


        <div class="flex-column-gap padding-large fill-primary">
            <blockquote>
                <span class="block"> 通过 CSS 样式实现的吸附窗口，这是开发第一优选；</span>
                <span class="block"> 优点：性能最好，可以通过 style 微调属性；</span>
                <span class="block"> 缺点：多嵌套了一层 div，可能会影响布局，比如：button-group；</span>
            </blockquote>

            <div class="grid-col-4" style="margin: 48px 0;">
                <div>
                    <div class="sea-float-box">
                        <el-button>click</el-button>
                        <div class="box bg-white float-top arrow-bottom">
                            <span>popover</span>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="sea-float-box">
                        <el-button>click</el-button>
                        <div class="box bg-white float-right arrow-left">
                            <span>popover</span>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="sea-float-box">
                        <el-button>click</el-button>
                        <div class="box bg-white float-bottom arrow-top">
                            <span>popover</span>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="sea-float-box">
                        <el-button>click</el-button>
                        <div class="box bg-white float-left arrow-right">
                            <span>popover</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex-column-gap padding-large fill-danger">
            <blockquote>
                <span class="block"> 几个角标的 css 设计，给 class-name 就生效；</span>
                <span class="block"> 通过伪元素实现，因此无法微调属性；</span>
                <span class="block"> 潜在风险：组件、角标和气泡，三者大小差距过大，可能看起来会怪怪的；</span>
            </blockquote>

            <div>
                <el-button class="arrow-top">click</el-button>
                <el-button class="arrow-bottom">click</el-button>
                <el-button class="arrow-left">click</el-button>
                <el-button class="arrow-right">click</el-button>
            </div>
        </div>

        <div class="flex-column-gap padding-large fill-primary">
            <blockquote>
                <span class="block">调整角标的位置；</span>
            </blockquote>

            <div class="box bg-white" style="position: relative;"
                 :class="'with-shadow ' + style">
                <el-button @click="top">top</el-button>
                <el-button @click="bottom">bottom</el-button>
                <el-button @click="left">left</el-button>
                <el-button @click="right">right</el-button>
            </div>
        </div>


        <div class="flex-box">
            <div class="flex-header">
                <h4>Direct Chat</h4>
                <span>聊天框</span>
            </div>
            <div class="flex-body flex-column-gap scroll">
                <div class="flex-row">
                    <div class="flex-left">
                        <sea-image-icon text="Admin" class="img-circle bg-primary margin" size="48"
                                        font-size="20px;"></sea-image-icon>
                    </div>
                    <div class="flex-body">
                        <div class="text-regular margin-left">2025-01-01 11:11:11</div>
                        <div class="box fill-primary arrow-left">
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                        </div>
                    </div>
                </div>

                <div class="flex-row">
                    <div class="flex-body">
                        <div class="text-regular margin-left">2025-01-01 11:11:11</div>
                        <div class="box fill-success arrow-right">
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                        </div>
                    </div>
                    <div class="flex-right">
                        <sea-image-icon text="Admin" class="img-circle bg-primary margin" size="48"
                                        font-size="20px;"></sea-image-icon>
                    </div>
                </div>

                <div class="flex-row">
                    <div class="flex-left">
                        <sea-image-icon text="Admin" class="img-circle bg-primary margin" size="48"
                                        font-size="20px;"></sea-image-icon>
                    </div>
                    <div class="flex-body">
                        <div class="text-regular margin-left">2025-01-01 11:11:11</div>
                        <div class="box bg-primary arrow-left">
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="flex-footer">
                <el-input>
                    <template #append>
                        <i class="fa fa-fw fa-search"></i>
                    </template>
                </el-input>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import Rect from "@/lang/popover/rect";
import {smartTitle} from "@/widget/use/use-floating";

// ------------------------- example1 -------------------------
// 普通样例

// 是否展开弹窗
const open1 = ref<Boolean>(false);
// 弹窗 dom 组件
const dom1 = ref<HTMLElement>(undefined);

// 触发弹窗的事件
const click1 = (evt) => {
    dom1.value = evt.currentTarget;
    open1.value = true;
}

// ------------------------- example2 -------------------------
// 带限制区域的弹窗
const open2 = ref<Boolean>(false);
const dom2 = ref<HTMLElement>(undefined);

const click2 = (evt) => {
    dom2.value = evt.currentTarget;
    open2.value = true;
}

const onNarrowChange = (dir) => {
    narrow.value = (dir !== 'top');
}

onMounted(() => {
})

// ------------------------- example3 -------------------------
const testRef = ref();

const style = ref('arrow-top');

const top = () => {
    style.value = 'arrow-top';
}
const bottom = () => {
    style.value = 'arrow-bottom';
}
const left = () => {
    style.value = 'arrow-left';
}
const right = () => {
    style.value = 'arrow-right';
}
</script>
